<template>
  <el-dialog
    :title="addForm.id > 0 ? '编辑管理员' : '添加管理员'"
    v-model="dialogVisble"
    width="35%"
    :before-close="closeBox"
  >
    <div>
      <el-form
        ref="formRef"
        style="max-width: 500px"
        :model="addForm"
        :rules="roleRules"
        label-width="auto"
        class="demo-dynamic"
      >
        <el-form-item prop="role_id" :label="'角色组'">
          <el-select
            v-model="addForm.role_id"
            placeholder="选择角色"
            clearable
            size="large"
            style="width: 240px; margin-right: 10px"
          >
            <el-option
              v-for="item in roleArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="username" label="账号">
          <el-input v-model="addForm.username" />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="addForm.pwd" type="password" />
          <el-text class="mx-1" type="info" v-if="addForm.id == 0"
            >不填密码则默认：123456</el-text
          >
        </el-form-item>

        <el-form-item label="状态" prop="state" v-if="addForm.id > 0">
          <el-switch v-model="addForm.state" active-text="启用" inactive-text="禁用" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeBox">取 消</el-button>
        <el-button type="primary" @click="submitForm(formRef)">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";

const pors = defineProps({
  showdialog: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Object,
    default: {
      id: 0,
      username: "", // 登陆账号
      role_id: "", // 角色组
      pwd: "", //密码
    },
  },
  roleArr: {
    type: Array,
    default: [{ name: "请选择角色组", id: 0 }],
  },
});
const formRef = ref<FormInstance>(); //定义form
//表单提交元素
const addForm = computed(() => pors.list);
// const addForm = reactive({});
//表单元素的规则
const roleRules = reactive({
  username: [
    {
      required: true,
      message: "请输入账号名称",
      trigger: "blur", //验证逻辑的触发方式
    },
  ],
  role_id: [
    {
      required: true,
      message: "请选择角色组",
      trigger: "blur", //验证逻辑的触发方式
    },
  ],
});

const emits = defineEmits(["useConfirm", "useClose"]); //定义一个或多个自定义按钮事件 传递到父组件

const dialogVisble = ref(false); // 定义控制弹窗显隐的变量

//关闭模态框
const closeBox = () => {
  if (!formRef) return;
  formRef.value.resetFields();
  dialogVisble.value = false; //重置为空
  emits("useClose", dialogVisble.value);
};

//确定/提交
const submitForm = (formData: FormInstance | undefined) => {
  if (!formData) return;
  //校验
  formData.validate((valid) => {
    if (valid) {
      // console.log();

      dialogVisble.value = false;
      emits("useConfirm", addForm.value);
      formData.resetFields(); //重置为空
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

// 将变量暴露出来
defineExpose({
  dialogVisble,
});
</script>
